<!DOCTYPE html>
<html>
<head>
	<title>租房</title>
	<meta charset="UTF-8" />
	<link type="text/css" rel="stylesheet" href="_assert/css/jquery-ui.css" />
		<link type="text/css" rel="stylesheet" href="_assert/css/jPages.css" />
	<link rel="stylesheet" type="text/css" href="_assert/css/helpCenter.css"/>
	<script type="text/javascript">

	</script>
</head>
<body>
	<div class="header">
		<div class="container">
			<div class="h">
				<div class="himg" style="margin-top: 15px;"><img src="_assert/img/logo.png" /></div>
				<div class="place">
					<span>当前位置：</span>
					<div id="cityDiV">
					</div>
				</div>
				<div class="hm"><img src="_assert/img/map.png"></div>
			</div>
		</div>
	</div>
	<div class="info"><div class="container">
		<div><img src="_assert/img/house_icon.png" />
			<span>昨日房源：新增</span><span class="green">35</span><span>套，共计</span>
			<span class="green">18914</span><span>套</span>
		</div>
		</div>
	</div>
	<div class="search"><div class="container">
		<div>
			<input type="text" placeholder="请小区名称或关键字" /><span class="ss"><img style="vertical-align: middle;" src="_assert/img/icon_search.png" /></span>
		</div>
		</div>
	</div>
	<div class="selectDiv">
		<div class="container">
		<ul class="s">
			<li><div>区域</div><div><img src="_assert/img/arrowDown.png" /></div></li>
			<li><div>价格</div><div><img src="_assert/img/arrowDown.png" /></div></li>
			<li><div>面积</div><div><img src="_assert/img/arrowDown.png" /></div></li>
			<li><div>户型</div><div><img src="_assert/img/arrowDown.png" /></div></li>
			<li><div>更多</div><div><img src="_assert/img/arrowDown.png" /></div></li>
		</ul>
		<div class="lists" >
			<ul class="l" style="display: none;">
				<li>不限</li>
				<li>40万以下</li>
				<li>40-60万</li>
				<li>60-80万</li>
				<li>80-100万</li>
				<li>100-120万</li>
				<li>120-160万</li>
				<li class="ls">160万以上</li>
				</ul>
				<ul class="l" style="display: none;">
				<li>不限</li>
				<li>40万以下</li>
				<li>40-60万</li>
				<li>60-80万</li>
				<li>80-100万</li>
				<li>100-120万</li>
				<li>120-160万</li>
				<li class="ls">160万以上</li>
				</ul>
				<ul class="l" style="display: none;">
				<li>不限</li>
				<li>40万以下</li>
				<li>40-60万</li>
				<li>60-80万</li>
				<li>80-100万</li>
				<li>100-120万</li>
				<li>120-160万</li>
				<li class="ls">160万以上</li>
				</ul>
				<ul class="l" style="display: none;">
				<li>不限</li>
				<li>40万以下</li>
				<li>40-60万</li>
				<li>60-80万</li>
				<li>80-100万</li>
				<li>100-120万</li>
				<li>120-160万</li>
				<li class="ls">160万以上</li>
				</ul>
				<ul class="more" style="display: none;">
				<li><img src="_assert/img/arrowLeft.png"/>房龄：<span class="focus">不限</span><span>2年以下</span><span>2-5年</span><span>5-10年</span><span>10年以上</span></li>
				<li><img src="_assert/img/arrowLeft.png"/>楼层：<span class="focus">不限</span><span>1层</span><span>7层以下</span><span>8-12层</span><span>12年以上</span></li>
				<li><img src="_assert/img/arrowLeft.png"/>交通：<span class="focus">不限</span><span>地铁沿线</span></li>
				<li><img src="_assert/img/arrowLeft.png"/>排序：<span class="focus">不限</span><span>按总价</span></li>
				<li><img src="_assert/img/arrowLeft.png"/>税费：<span class="focus">不限</span><span>满两年（无营业税）</span></li>
				<li><img src="_assert/img/arrowLeft.png"/>服务：<span class="focus">不限</span><span>房小二推荐房源</span></li>
				<li><img src="_assert/img/arrowLeft.png"/>类型：<span class="focus">不限</span><span>精品房源</span></li>
				<li><button class="btn">确定</button></li>
				</ul>
		</div>
		</div>
		
	</div>
	<div class="main">
			<div id="movies">
		<div class="item">
			<div class="pic"><img src="_assert/img/house.png"/></div>
			<div class="content">
				<span class="address">东方首府未来城</span>
				<span class="tag e">精品房源</span>
				<div class="desc">2室2厅1厨1卫&nbsp;|&nbsp;105平&nbsp;|&nbsp;27/33层</div>
				<div class="tags">双气，地铁口，BRT专线，能改为三室两厅</div>
			</div>
			<div class="right">
				<div class="price">
					<span class="num">8000</span>元/月
				</div>
			</div>
		</div>

		<div class="item">
			<div class="pic"><img src="_assert/img/house.png"/></div>
			<div class="content">
				<span class="address">东方首府未来城</span>
				<span class="tag e">精品房源</span>
				<div class="desc">2室2厅1厨1卫&nbsp;|&nbsp;105平&nbsp;|&nbsp;27/33层</div>
				<div class="tags">双气，地铁口，BRT专线，能改为三室两厅</div>
			</div>
			<div class="right">
				<div class="price">
					<span class="num">8000</span>元/月
				</div>
			</div>
		</div>

		<div class="item">
			<div class="pic"><img src="_assert/img/house.png"/></div>
			<div class="content">
				<span class="address">东方首府未来城</span>
				<span class="tag e">精品房源</span>
				<div class="desc">2室2厅1厨1卫&nbsp;|&nbsp;105平&nbsp;|&nbsp;27/33层</div>
				<div class="tags">双气，地铁口，BRT专线，能改为三室两厅</div>
			</div>
			<div class="right">
				<div class="price">
					<span class="num">8000</span>元/月
				</div>
			</div>
		</div>
			<div class="item">
			<div class="pic"><img src="_assert/img/house.png"/></div>
			<div class="content">
				<span class="address">东方首府未来城</span>
				<span class="tag e">精品房源</span>
				<div class="desc">2室2厅1厨1卫&nbsp;|&nbsp;105平&nbsp;|&nbsp;27/33层</div>
				<div class="tags">双气，地铁口，BRT专线，能改为三室两厅</div>
			</div>
			<div class="right">
				<div class="price">
					<span class="num">8000</span>元/月
				</div>
			</div>
		</div>

	<div class="item">
			<div class="pic"><img src="_assert/img/house.png"/></div>
			<div class="content">
				<span class="address">东方首府未来城</span>
				<span class="tag e">精品房源</span>
				<div class="desc">2室2厅1厨1卫&nbsp;|&nbsp;105平&nbsp;|&nbsp;27/33层</div>
				<div class="tags">双气，地铁口，BRT专线，能改为三室两厅</div>
			</div>
			<div class="right">
				<div class="price">
					<span class="num">8000</span>元/月
				</div>
			</div>
		</div>
	<div class="item">
			<div class="pic"><img src="_assert/img/house.png"/></div>
			<div class="content">
				<span class="address">东方首府未来城</span>
				<span class="tag e">精品房源</span>
				<div class="desc">2室2厅1厨1卫&nbsp;|&nbsp;105平&nbsp;|&nbsp;27/33层</div>
				<div class="tags">双气，地铁口，BRT专线，能改为三室两厅</div>
			</div>
			<div class="right">
				<div class="price">
					<span class="num">8000</span>元/月
				</div>
			</div>
		</div>
</div>
<div class="page">
	<div class="container">
		<div id="areaP">
			<span class="green">1</span>
			<span>1261页</span>
		</div>
	</div>
</div>
<div class="pageS" style="display:none;"></div>
<div class="pages" style="display: none;">
				<ul >
					<li>
						第1页
					</li>
					<li>
						第2页
					</li>
					<li>
						第3页
					</li>
					<li>
						第4页
					</li>
					<li>
						第5页
					</li>
					<li>
						第6页
					</li>
					<li>
						第7页
					</li>
					<li>
						第7页
					</li>
					<li>
						第7页
					</li>
					<li>
						第7页
					</li>
					<li>
						第7页
					</li>
					<li>
						第7页
					</li>
					<li>
						第7页
					</li>
					<li>
						第7页
					</li><li>
						第7页
					</li>
				</ul>
				<div class="borderline"></div>
				<div style="text-align: center; background: #f3f4f3;padding: 10px;">
					<button class="cancle">
						取消
					</button>
					<button class="chose" style="margin-left:40px;background:orange;">
						确定
					</button>
				</div>
			</div>
	</div>
	<script type="text/javascript" src="_assert/js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="_assert/js/jquery.citySelect.js"></script>
	<script type="text/javascript" src="_assert/js/jquery-ui.js"></script>
		<script type="text/javascript" src="_assert/js/jPages.js"></script>
	<script type="text/javascript">
		$(function(){
			var parms = {
				"list" : [{
					"province" : "广东省",
					"city" : [{
						"name" : "广州",
						"flag" : "0"
					}, {
						"name" : "深圳",
						"flag" : "1"
					}, {
						"name" : "河源",
						"flag" : "0"
					}],
					"flag" : "1"
				}, {
					"province" : "河南省",
					"city" : [{
						"name" : "郑州",
						"flag" : "0"
					}, {
						"name" : "南阳",
						"flag" : "0"
					}, {
						"name" : "开封",
						"flag" : "0"
					}],
					"flag" : "0"
				}, {
					"province" : "福建省",
					"city" : [{
						"name" : "郑州",
						"flag" : "0"
					}, {
						"name" : "南阳",
						"flag" : "0"
					}, {
						"name" : "开封",
						"flag" : "0"
					}],
					"flag" : "0"
				}, {
					"province" : "湖南省",
					"city" : [{
						"name" : "郑州",
						"flag" : "0"
					}, {
						"name" : "南阳",
						"flag" : "0"
					}, {
						"name" : "开封",
						"flag" : "0"
					}],
					"flag" : "0"
				}]
			};
			$("#cityDiV").citySelect(parms);
			
			
		});
		$(".selectDiv ul.s li").click(function(){
			$(this).siblings().removeClass("focus").end().addClass("focus");
			$(this).children().children("img").attr("src","_assert/img/arrowDownG.png");
			$(this).siblings().children().children("img").attr("src","_assert/img/arrowDown.png");
			$(".lists").children().hide();
			$(".lists").children().eq($(this).index()).show();
		});
		$(".selectDiv .lists ul.more li button").click(function(){
			$(this).parent().parent().hide();
		});
		$("#areaP").click(function(){
			//window.onscroll=null;
				$(".pages").show();
				console.log($(".pages ul").scrollTop());
				$(".pages ul").scrollTop((($("#areaP span.green").text()-1)*51));
				LastScroll=($("#areaP span.green").text()-1)*51;
				//$(".pages ul").scrollTop=(($("#areaP span.green").text()-1)*51);
				window.onscroll=null;
		});
		$(".pages button.cancle").click(function(){
							
			$("body").css("overflow-y","visible");
			
			window.onscroll=scrollFunc;
				$(".pages").hide();
		});
		$(".pages button.chose").click(function(){
			var n = $(".pages ul li.focus").attr("name");
				$(".pageS a").eq(n - 0 + 1).trigger("click");
				console.log($(".pageS a").eq(n - 0 + 1));
				$("body").css("overflow-y","visible");
				window.onscroll=scrollFunc;
			
				$("body")[0].scrollTop=($("#areaP span.green").text()-1)*208*3-0+200;
					document.documentElement.scrollTop=($("#areaP span.green").text()-1)*208*3-0+200;
				
				$(".pages").hide();
		});
		$(".lists .more span").click(function(){
			$(this).siblings().removeClass("focus").end().addClass("focus");
		});
		$(".lists .l li").click(function() {
				$(this).siblings().removeClass("focus").end().addClass("focus");
				$(this).parent().hide();
			});
			var bodyS=0;var LastScroll=0;
			var scrollFunc = function(e) {
				var scrollTOP=document.documentElement.scrollTop||document.body.scrollTop;
				bodyS=scrollTOP;
				console.log(bodyS);
					var t="";
					t=Math.ceil(Math.floor(scrollTOP/208)/3);
						if(t==0){
							t=1;
						}
						$("#areaP span.green").text(t);
			};
			window.onscroll=scrollFunc;
			
			$(".pages ul").scroll(function(event){
				 event.preventDefault();
			    event.stopPropagation();
			    console.log("bodyS"+bodyS);
				$(window).scrollTop(bodyS);
				console.log($(this).scrollTop());
						if($(this).scrollTop()-LastScroll>0){
							console.log("down");
							console.log("LastScroll"+LastScroll);
							$("this").scrollTop(51+(LastScroll-0));
							LastScroll=$(this).scrollTop();
							var	t=Math.ceil($("this").scrollTop()/51);
							console.log("t"+t);
							$("#areaP span.green").text(t);
						}
						if($(this).scrollTop()-LastScroll<0){
							console.log("up");
							console.log("LastScroll"+LastScroll);
							$("this").scrollTop(LastScroll-51);
							LastScroll=$(this).scrollTop();
							var	t=Math.ceil($("this").scrollTop()/51)-0+1;
							console.log("t"+t);
							$("#areaP span.green").text(t);
					console.log(t);
						}
						if($(this).scrollTop()==0||$(this).scrollTop()==LastScroll){
							return;
						}
			});
			// var scrollFunc1 = function(e) {
						// $(window).scrollTop(bodyS);
						// if($(this).scrollTop()-LastScroll>0){
							// console.log("down");
							// $(".pages ul").scrollTop(51+$(".pages ul").scrollTop());
						// }
						// if($(this).scrollTop()-LastScroll<0){
							// console.log("up");
							// $(".pages ul").scrollTop($(".pages ul").scrollTop()-51);
						// }
					// console.log(Math.ceil($(".pages ul").scrollTop()/51));
				 // var	t=Math.ceil($(".pages ul").scrollTop()/51)-0+1;
					// $("#areaP span.green").text(t);
						// console.log(t);
// 					
			// };
	</script>
</body>
</html>